<script setup>
import { toRefs, ref, onMounted } from 'vue';
import proj4 from 'proj4';
import { BASE_FILE_PATH } from '@/apis/index';

// * 国家 2000 投影坐标，3 度带
// eslint-disable-next-line
proj4.defs('EPSG:4546', '+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs');

const props = defineProps({
  popupInfo: Object,
  title: String,
  mainLabel: Array,
  type: String,
});
const { popupInfo, title, mainLabel, type } = toRefs(props);

const XY = ref([]);

onMounted(() => {
  if (type.value == '巡护人员') {
    const xy = proj4('EPSG:4546', [JSON.parse(popupInfo.value?.location)?.y, JSON.parse(popupInfo.value?.location)?.x]);

    XY.value = xy;
  }
});
</script>
<template>
  <div id="popup_root">
    <header>{{ title }}</header>
    <main v-if="type == '巡护人员'">
      <div><img :src="`${BASE_FILE_PATH}${popupInfo.userAvatar}`" /></div>
      <div class="box_">
        <aside class="_fieldsName">
          <span v-for="(item, index) in mainLabel" :key="index">{{ item }}</span>
        </aside>
        <div class="_fields">
          <span :title="popupInfo?.username">{{ popupInfo?.username }}</span>
          <span :title="popupInfo?.userAccount">{{ popupInfo?.userAccount }}</span>
          <span
            :title="`${JSON.parse(popupInfo?.location).y.toFixed(5)},${JSON.parse(popupInfo?.location).x.toFixed(5)}`"
            >{{ JSON.parse(popupInfo?.location).y.toFixed(5) }},{{ JSON.parse(popupInfo?.location).x.toFixed(5) }}</span
          >
          <span :title="`${parseFloat(XY[0]).toFixed(5)},${parseFloat(XY[1]).toFixed(5)}`"
            >{{ parseFloat(XY[0]).toFixed(5) }},{{ parseFloat(XY[1]).toFixed(5) }}</span
          >
          <span>{{ popupInfo?.latestOnlineTime }}</span>
          <span :title="popupInfo?.positionNames" class="span_">{{ popupInfo?.positionNames }}</span>
          <span>{{ popupInfo?.userCreatedDate }}</span>
        </div>
      </div>
    </main>
    <main v-if="type == '巡护轨迹' || type == '个人巡护轨迹'">
      <div><img :src="`${BASE_FILE_PATH}${popupInfo.userAvatar ?? popupInfo.creatorAvatar}`" /></div>
      <div class="box_">
        <aside class="_fieldsName">
          <span v-for="(item, index) in mainLabel" :key="index">{{ item }}</span>
        </aside>
        <div class="_fields">
          <span :title="popupInfo?.creatorName">{{ popupInfo?.creatorName }}</span>
          <span :title="popupInfo?.creatorAccount">{{ popupInfo?.creatorAccount }}</span>
          <span
            :title="popupInfo?.positionNames ? popupInfo?.positionNames : JSON.parse(popupInfo?.deptNames).join('、')"
            >{{
              popupInfo?.positionNames ? popupInfo?.positionNames : JSON.parse(popupInfo?.deptNames).join('、')
            }}</span
          >
          <span>{{ (popupInfo?.patrolDuration * 0.000278).toFixed(1) }}h</span>
          <span>{{ popupInfo?.trackLen * 0.001 }}km</span>
          <span>{{ popupInfo?.startDate }}</span>
          <span>{{ popupInfo?.upToStandard ? '是' : '否' }}</span>
        </div>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
#popup_root {
  box-sizing: border-box;
  min-width: 688px;
  height: 359px;
  padding: 20px;
  color: #ffffff;
  word-wrap: break-word;
  background: url(../../../assets/images/icon/弹窗背景框.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 5px;

  header {
    padding-left: 14px;
    color: #ffffff;
    font-weight: 600;
    font-size: 22px;
    font-family: PangMenZhengDao;
    text-shadow: 0px 2px 1px rgba(11, 26, 53, 0.4);
  }

  main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 20px 13px 17px;
    img {
      width: 195px;
      height: 220px;
    }
    .box_ {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      margin-left: 30px;
      font-size: 18px;

      ._fieldsName {
        margin-right: 26px;
        span {
          display: block;
          min-height: 27px;
          margin-bottom: 6px;
          color: #ffffff;
          white-space: nowrap;
          text-align-last: right;
        }
      }
      ._fields {
        padding-left: 2px;

        span {
          display: block;
          justify-content: flex-start;
          width: 247px;
          min-height: 27px;
          margin-bottom: 6px;
          overflow: hidden;
          color: #ffffff;
          white-space: nowrap;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
</style>
